{% extends 'base.html' %}

{% block title %}{{ title }} - EasyTesting{% endblock %}

{% block header %}{{ title }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-body p-4">
                <form method="post">
                    {% csrf_token %}

                    <div class="mb-4">
                        <label for="{{ form.name.id_for_label }}" class="form-label fw-medium">环境名称</label>
                        {{ form.name.errors }}
                        <input type="text" class="form-control form-control-lg" id="{{ form.name.id_for_label }}" name="{{ form.name.html_name }}" value="{{ form.name.value|default:'' }}" required placeholder="请输入环境名称">
                        <div class="form-text">环境名称(例如, OA系统, HR系统 )</div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.project.id_for_label }}" class="form-label fw-medium">项目</label>
                        {{ form.project.errors }}
                        <select class="form-select" id="{{ form.project.id_for_label }}" name="{{ form.project.html_name }}" required>
                            {% for choice in form.project.field.choices %}
                                <option value="{{ choice.0 }}" {% if form.project.value|stringformat:"s" == choice.0|stringformat:"s" %}selected{% endif %}>{{ choice.1 }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text">选择与环境关联的项目</div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.base_url.id_for_label }}" class="form-label fw-medium">域名</label>
                        {{ form.base_url.errors }}
                        <input type="url" class="form-control" id="{{ form.base_url.id_for_label }}" name="{{ form.base_url.html_name }}" value="{{ form.base_url.value|default:'' }}" required placeholder="https://api.example.com">
                        <div class="form-text">环境中API请求的URL</div>
                    </div>

                    <div class="mb-4">
                        <label for="{{ form.variables_json.id_for_label }}" class="form-label fw-medium">环境变量 (JSON)</label>
                        {{ form.variables_json.errors }}
                        <textarea class="form-control font-monospace" id="{{ form.variables_json.id_for_label }}" name="{{ form.variables_json.html_name }}" rows="6" placeholder='{"key1": "value1", "key2": "value2"}'>{{ form.variables_json.value|default:"" }}</textarea>
                        <div class="form-text">{{ form.variables_json.help_text }}</div>
                    </div>

                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% if request.GET.project %}{% url 'project_detail' pk=request.GET.project %}{% else %}{% url 'environment_list' %}{% endif %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left"></i> 取消
                        </a>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-check-lg"></i> 保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
